<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thymeleaf # 符号详解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        
        h1 {
            color: #667eea;
            font-size: 2.5em;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .intro {
            background: #e7f3ff;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            border-left: 5px solid #667eea;
        }
        
        .intro h2 {
            color: #667eea;
            margin-bottom: 15px;
        }
        
        .utility-card {
            background: #fff;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            transition: all 0.3s;
        }
        
        .utility-card:hover {
            border-color: #667eea;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
        }
        
        .utility-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .utility-icon {
            font-size: 2em;
            margin-right: 15px;
        }
        
        .utility-name {
            color: #667eea;
            font-size: 1.5em;
            font-weight: bold;
        }
        
        .description {
            color: #666;
            margin-bottom: 15px;
            font-size: 1.05em;
        }
        
        .example-section {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        .example-title {
            color: #495057;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .code-block {
            background: #282c34;
            color: #abb2bf;
            padding: 15px;
            border-radius: 5px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.9em;
            overflow-x: auto;
            margin: 10px 0;
        }
        
        .code-block .tag {
            color: #e06c75;
        }
        
        .code-block .attr {
            color: #d19a66;
        }
        
        .code-block .string {
            color: #98c379;
        }
        
        .code-block .comment {
            color: #5c6370;
            font-style: italic;
        }
        
        .method-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        
        .method-table th {
            background: #667eea;
            color: white;
            padding: 12px;
            text-align: left;
            font-weight: bold;
        }
        
        .method-table td {
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
        }
        
        .method-table tr:nth-child(even) {
            background: #f8f9fa;
        }
        
        .method-table code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 3px;
            color: #e83e8c;
            font-family: 'Consolas', monospace;
        }
        
        .quick-ref {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        .quick-ref h3 {
            color: #856404;
            margin-bottom: 15px;
        }
        
        .tip-box {
            background: #d1ecf1;
            border-left: 4px solid #17a2b8;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
        
        .warning-box {
            background: #f8d7da;
            border-left: 4px solid #dc3545;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1># 符号在Thymeleaf中的作用</h1>
        
        <div class="intro">
            <h2>🔑 核心概念</h2>
            <p><strong style="font-size: 1.2em; color: #667eea;"># 符号用于访问Thymeleaf的内置工具对象（Utility Objects）</strong></p>
            <p style="margin-top: 10px;">这些工具对象提供了大量实用的方法，用于处理日期、字符串、数字、集合等常见操作。</p>
            <p style="margin-top: 10px;"><strong>语法：</strong> <code style="background: #f4f4f4; padding: 3px 8px; border-radius: 3px;">#对象名.方法名(参数)</code></p>
        </div>

        <!-- #dates 日期工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">📅</div>
                <div class="utility-name">#dates - 日期处理工具</div>
            </div>
            
            <div class="description">
                用于格式化和处理 <code>java.util.Date</code> 对象
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 40%">方法</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td><code>#dates.format(date, 'pattern')</code></td>
                    <td>格式化日期</td>
                </tr>
                <tr>
                    <td><code>#dates.year(date)</code></td>
                    <td>获取年份</td>
                </tr>
                <tr>
                    <td><code>#dates.month(date)</code></td>
                    <td>获取月份（0-11）</td>
                </tr>
                <tr>
                    <td><code>#dates.day(date)</code></td>
                    <td>获取日期</td>
                </tr>
                <tr>
                    <td><code>#dates.hour(date)</code></td>
                    <td>获取小时</td>
                </tr>
                <tr>
                    <td><code>#dates.createNow()</code></td>
                    <td>创建当前日期</td>
                </tr>
                <tr>
                    <td><code>#dates.createToday()</code></td>
                    <td>创建今天的日期（时间为00:00:00）</td>
                </tr>
            </table>
            
            <div class="example-section">
                <div class="example-title">💡 使用示例：</div>
                <div class="code-block">
<span class="comment">&lt;!-- 格式化日期 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.format(user.registerDate, 'yyyy-MM-dd')}"</span>&gt;2024-01-15&lt;/<span class="tag">p</span>&gt;
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.format(user.registerDate, 'yyyy年MM月dd日')}"</span>&gt;2024年01月15日&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 获取年份 --&gt;</span>
&lt;<span class="tag">p</span>&gt;注册年份：&lt;<span class="tag">span</span> <span class="attr">th:text</span>=<span class="string">"${#dates.year(user.registerDate)}"</span>&gt;2024&lt;/<span class="tag">span</span>&gt;&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 显示当前时间 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.format(#dates.createNow(), 'yyyy-MM-dd HH:mm:ss')}"</span>&gt;&lt;/<span class="tag">p</span>&gt;
                </div>
            </div>
        </div>

        <!-- #strings 字符串工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">📝</div>
                <div class="utility-name">#strings - 字符串处理工具</div>
            </div>
            
            <div class="description">
                用于处理字符串的各种操作
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 40%">方法</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td><code>#strings.isEmpty(str)</code></td>
                    <td>检查字符串是否为空</td>
                </tr>
                <tr>
                    <td><code>#strings.length(str)</code></td>
                    <td>获取字符串长度</td>
                </tr>
                <tr>
                    <td><code>#strings.toUpperCase(str)</code></td>
                    <td>转换为大写</td>
                </tr>
                <tr>
                    <td><code>#strings.toLowerCase(str)</code></td>
                    <td>转换为小写</td>
                </tr>
                <tr>
                    <td><code>#strings.substring(str, start, end)</code></td>
                    <td>截取子字符串</td>
                </tr>
                <tr>
                    <td><code>#strings.contains(str, fragment)</code></td>
                    <td>检查是否包含子串</td>
                </tr>
                <tr>
                    <td><code>#strings.startsWith(str, prefix)</code></td>
                    <td>检查是否以某字符串开头</td>
                </tr>
                <tr>
                    <td><code>#strings.replace(str, before, after)</code></td>
                    <td>替换字符串</td>
                </tr>
                <tr>
                    <td><code>#strings.trim(str)</code></td>
                    <td>去除首尾空格</td>
                </tr>
            </table>
            
            <div class="example-section">
                <div class="example-title">💡 使用示例：</div>
                <div class="code-block">
<span class="comment">&lt;!-- 转换大小写 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#strings.toUpperCase(user.username)}"</span>&gt;JOHN&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 截取字符串 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#strings.substring(user.bio, 0, 50) + '...'}"</span>&gt;简介前50字...&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 条件判断 --&gt;</span>
&lt;<span class="tag">div</span> <span class="attr">th:if</span>=<span class="string">"${#strings.isEmpty(user.email)}"</span>&gt;
    &lt;<span class="tag">p</span>&gt;邮箱未填写&lt;/<span class="tag">p</span>&gt;
&lt;/<span class="tag">div</span>&gt;

<span class="comment">&lt;!-- 检查包含 --&gt;</span>
&lt;<span class="tag">div</span> <span class="attr">th:if</span>=<span class="string">"${#strings.contains(user.email, 'gmail')}"</span>&gt;
    &lt;<span class="tag">p</span>&gt;Gmail用户&lt;/<span class="tag">p</span>&gt;
&lt;/<span class="tag">div</span>&gt;
                </div>
            </div>
        </div>

        <!-- #numbers 数字工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">🔢</div>
                <div class="utility-name">#numbers - 数字格式化工具</div>
            </div>
            
            <div class="description">
                用于格式化数字、货币、百分比等
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 40%">方法</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td><code>#numbers.formatDecimal(num, minInt, minDec)</code></td>
                    <td>格式化小数</td>
                </tr>
                <tr>
                    <td><code>#numbers.formatInteger(num, minDigits)</code></td>
                    <td>格式化整数</td>
                </tr>
                <tr>
                    <td><code>#numbers.formatPercent(num, minInt, minDec)</code></td>
                    <td>格式化为百分比</td>
                </tr>
                <tr>
                    <td><code>#numbers.formatCurrency(num)</code></td>
                    <td>格式化为货币</td>
                </tr>
                <tr>
                    <td><code>#numbers.sequence(from, to)</code></td>
                    <td>创建数字序列</td>
                </tr>
            </table>
            
            <div class="example-section">
                <div class="example-title">💡 使用示例：</div>
                <div class="code-block">
<span class="comment">&lt;!-- 格式化小数（整数位至少1位，小数位2位） --&gt;</span>
&lt;<span class="tag">p</span>&gt;价格：¥&lt;<span class="tag">span</span> <span class="attr">th:text</span>=<span class="string">"${#numbers.formatDecimal(product.price, 1, 2)}"</span>&gt;99.99&lt;/<span class="tag">span</span>&gt;&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 格式化百分比 --&gt;</span>
&lt;<span class="tag">p</span>&gt;完成度：&lt;<span class="tag">span</span> <span class="attr">th:text</span>=<span class="string">"${#numbers.formatPercent(0.856, 1, 2)}"</span>&gt;85.60%&lt;/<span class="tag">span</span>&gt;&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 创建序列（用于循环） --&gt;</span>
&lt;<span class="tag">select</span>&gt;
    &lt;<span class="tag">option</span> <span class="attr">th:each</span>=<span class="string">"i : ${#numbers.sequence(1, 10)}"</span> 
            <span class="attr">th:value</span>=<span class="string">"${i}"</span> 
            <span class="attr">th:text</span>=<span class="string">"${i}"</span>&gt;&lt;/<span class="tag">option</span>&gt;
&lt;/<span class="tag">select</span>&gt;
                </div>
            </div>
        </div>

        <!-- #lists 列表工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">📋</div>
                <div class="utility-name">#lists - 列表处理工具</div>
            </div>
            
            <div class="description">
                用于处理List集合
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 40%">方法</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td><code>#lists.size(list)</code></td>
                    <td>获取列表大小</td>
                </tr>
                <tr>
                    <td><code>#lists.isEmpty(list)</code></td>
                    <td>检查列表是否为空</td>
                </tr>
                <tr>
                    <td><code>#lists.contains(list, element)</code></td>
                    <td>检查是否包含元素</td>
                </tr>
                <tr>
                    <td><code>#lists.sort(list)</code></td>
                    <td>排序列表</td>
                </tr>
            </table>
            
            <div class="example-section">
                <div class="example-title">💡 使用示例：</div>
                <div class="code-block">
<span class="comment">&lt;!-- 显示列表大小 --&gt;</span>
&lt;<span class="tag">p</span>&gt;共有 &lt;<span class="tag">span</span> <span class="attr">th:text</span>=<span class="string">"${#lists.size(users)}"</span>&gt;10&lt;/<span class="tag">span</span>&gt; 个用户&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 检查列表是否为空 --&gt;</span>
&lt;<span class="tag">div</span> <span class="attr">th:if</span>=<span class="string">"${#lists.isEmpty(users)}"</span>&gt;
    &lt;<span class="tag">p</span>&gt;暂无用户&lt;/<span class="tag">p</span>&gt;
&lt;/<span class="tag">div</span>&gt;

<span class="comment">&lt;!-- 检查是否包含元素 --&gt;</span>
&lt;<span class="tag">div</span> <span class="attr">th:if</span>=<span class="string">"${#lists.contains(user.roles, 'ADMIN')}"</span>&gt;
    &lt;<span class="tag">p</span>&gt;管理员用户&lt;/<span class="tag">p</span>&gt;
&lt;/<span class="tag">div</span>&gt;
                </div>
            </div>
        </div>

        <!-- #arrays 数组工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">🔢</div>
                <div class="utility-name">#arrays - 数组处理工具</div>
            </div>
            
            <div class="description">
                用于处理数组
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 40%">方法</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td><code>#arrays.length(array)</code></td>
                    <td>获取数组长度</td>
                </tr>
                <tr>
                    <td><code>#arrays.isEmpty(array)</code></td>
                    <td>检查数组是否为空</td>
                </tr>
                <tr>
                    <td><code>#arrays.contains(array, element)</code></td>
                    <td>检查是否包含元素</td>
                </tr>
            </table>
            
            <div class="example-section">
                <div class="example-title">💡 使用示例：</div>
                <div class="code-block">
<span class="comment">&lt;!-- 显示数组长度 --&gt;</span>
&lt;<span class="tag">p</span>&gt;共 &lt;<span class="tag">span</span> <span class="attr">th:text</span>=<span class="string">"${#arrays.length(tags)}"</span>&gt;5&lt;/<span class="tag">span</span>&gt; 个标签&lt;/<span class="tag">p</span>&gt;
                </div>
            </div>
        </div>

        <!-- #maps Map工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">🗺️</div>
                <div class="utility-name">#maps - Map处理工具</div>
            </div>
            
            <div class="description">
                用于处理Map集合
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 40%">方法</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td><code>#maps.size(map)</code></td>
                    <td>获取Map大小</td>
                </tr>
                <tr>
                    <td><code>#maps.isEmpty(map)</code></td>
                    <td>检查Map是否为空</td>
                </tr>
                <tr>
                    <td><code>#maps.containsKey(map, key)</code></td>
                    <td>检查是否包含键</td>
                </tr>
            </table>
        </div>

        <!-- #bools 布尔工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">✅</div>
                <div class="utility-name">#bools - 布尔处理工具</div>
            </div>
            
            <div class="description">
                用于处理布尔值
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 40%">方法</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td><code>#bools.isTrue(value)</code></td>
                    <td>检查是否为true</td>
                </tr>
                <tr>
                    <td><code>#bools.isFalse(value)</code></td>
                    <td>检查是否为false</td>
                </tr>
            </table>
            
            <div class="example-section">
                <div class="example-title">💡 使用示例：</div>
                <div class="code-block">
<span class="comment">&lt;!-- 布尔判断 --&gt;</span>
&lt;<span class="tag">div</span> <span class="attr">th:if</span>=<span class="string">"${#bools.isTrue(user.active)}"</span>&gt;
    &lt;<span class="tag">span</span> <span class="attr">class</span>=<span class="string">"badge-active"</span>&gt;活跃用户&lt;/<span class="tag">span</span>&gt;
&lt;/<span class="tag">div</span>&gt;
                </div>
            </div>
        </div>

        <!-- 其他重要工具 -->
        <div class="utility-card">
            <div class="utility-header">
                <div class="utility-icon">🛠️</div>
                <div class="utility-name">其他常用工具对象</div>
            </div>
            
            <table class="method-table">
                <tr>
                    <th style="width: 25%">对象</th>
                    <th style="width: 35%">说明</th>
                    <th>示例</th>
                </tr>
                <tr>
                    <td><code>#calendars</code></td>
                    <td>处理Calendar对象</td>
                    <td><code>${#calendars.year(cal)}</code></td>
                </tr>
                <tr>
                    <td><code>#objects</code></td>
                    <td>对象工具</td>
                    <td><code>${#objects.nullSafe(obj, default)}</code></td>
                </tr>
                <tr>
                    <td><code>#ctx</code></td>
                    <td>上下文对象</td>
                    <td><code>${#ctx.variables}</code></td>
                </tr>
                <tr>
                    <td><code>#request</code></td>
                    <td>HttpServletRequest对象</td>
                    <td><code>${#request.getParameter('id')}</code></td>
                </tr>
                <tr>
                    <td><code>#session</code></td>
                    <td>HttpSession对象</td>
                    <td><code>${#session.getAttribute('user')}</code></td>
                </tr>
                <tr>
                    <td><code>#servletContext</code></td>
                    <td>ServletContext对象</td>
                    <td><code>${#servletContext.contextPath}</code></td>
                </tr>
            </table>
        </div>

        <!-- 快速参考 -->
        <div class="quick-ref">
            <h3>📌 快速参考：# 符号常用场景</h3>
            
            <div class="code-block">
<span class="comment">&lt;!-- 1. 格式化日期 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.format(date, 'yyyy-MM-dd')}"</span>&gt;&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 2. 字符串操作 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#strings.toUpperCase(name)}"</span>&gt;&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 3. 检查空值 --&gt;</span>
&lt;<span class="tag">div</span> <span class="attr">th:if</span>=<span class="string">"${#strings.isEmpty(email)}"</span>&gt;未填写邮箱&lt;/<span class="tag">div</span>&gt;

<span class="comment">&lt;!-- 4. 格式化数字 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#numbers.formatDecimal(price, 1, 2)}"</span>&gt;&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 5. 获取集合大小 --&gt;</span>
&lt;<span class="tag">p</span>&gt;共 &lt;<span class="tag">span</span> <span class="attr">th:text</span>=<span class="string">"${#lists.size(items)}"</span>&gt;&lt;/<span class="tag">span</span>&gt; 条记录&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 6. 创建数字序列 --&gt;</span>
&lt;<span class="tag">div</span> <span class="attr">th:each</span>=<span class="string">"i : ${#numbers.sequence(1, 10)}"</span>&gt;
    页码: &lt;<span class="tag">span</span> <span class="attr">th:text</span>=<span class="string">"${i}"</span>&gt;&lt;/<span class="tag">span</span>&gt;
&lt;/<span class="tag">div</span>&gt;

<span class="comment">&lt;!-- 7. 获取请求参数 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#request.getParameter('page')}"</span>&gt;&lt;/<span class="tag">p</span>&gt;

<span class="comment">&lt;!-- 8. 获取Session属性 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#session.getAttribute('username')}"</span>&gt;&lt;/<span class="tag">p</span>&gt;
            </div>
        </div>

        <!-- 提示 -->
        <div class="tip-box">
            <strong>💡 提示：</strong>
            <ul style="margin-left: 20px; margin-top: 10px;">
                <li># 符号后面跟的是Thymeleaf提供的<strong>内置对象</strong></li>
                <li>这些对象提供的方法可以直接在模板中使用，无需在Java代码中准备</li>
                <li>使用工具对象可以让模板更简洁，避免在Controller中进行大量的数据格式化</li>
                <li>所有工具对象都是线程安全的</li>
            </ul>
        </div>

        <!-- 警告 -->
        <div class="warning-box">
            <strong>⚠️ 注意事项：</strong>
            <ul style="margin-left: 20px; margin-top: 10px;">
                <li>工具对象主要用于<strong>展示逻辑</strong>，复杂的业务逻辑应该在Service层处理</li>
                <li>不要在模板中执行耗时操作</li>
                <li><code>#dates</code>处理的是<code>java.util.Date</code>，如果使用<code>LocalDate</code>需要用<code>#temporals</code></li>
                <li>过度使用工具对象会让模板变得复杂，适当在Controller中预处理数据</li>
            </ul>
        </div>

        <!-- 完整对比 -->
        <div class="utility-card">
            <h2 style="color: #667eea; margin-bottom: 20px;">📊 # 符号 vs $ 符号</h2>
            
            <table class="method-table">
                <tr>
                    <th style="width: 20%">符号</th>
                    <th style="width: 30%">用途</th>
                    <th>示例</th>
                </tr>
                <tr>
                    <td><strong style="font-size: 1.3em; color: #667eea;">$</strong></td>
                    <td>访问<strong>变量</strong>和<strong>对象属性</strong></td>
                    <td>
                        <code>${user.name}</code><br>
                        <code>${product.price}</code><br>
                        获取Controller传递的数据
                    </td>
                </tr>
                <tr>
                    <td><strong style="font-size: 1.3em; color: #667eea;">#</strong></td>
                    <td>访问<strong>内置工具对象</strong></td>
                    <td>
                        <code>${#dates.format(...)}</code><br>
                        <code>${#strings.toUpperCase(...)}</code><br>
                        使用Thymeleaf提供的工具方法
                    </td>
                </tr>
            </table>
            
            <div class="example-section" style="margin-top: 20px;">
                <div class="example-title">💡 组合使用示例：</div>
                <div class="code-block">
<span class="comment">&lt;!-- $ 获取变量，# 调用工具方法 --&gt;</span>
&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#strings.toUpperCase(user.username)}"</span>&gt;&lt;/<span class="tag">p</span>&gt;
<span class="comment">&lt;!--     ↑ 工具对象                  ↑ 变量       --&gt;</span>

&lt;<span class="tag">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.format(order.createTime, 'yyyy-MM-dd')}"</span>&gt;&lt;/<span class="tag">p</span>&gt;
<span class="comment">&lt;!--     ↑ 工具对象      ↑ 变量                         --&gt;</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>